import React, { Component } from 'react';
import { Breadcrumb } from 'antd';
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';

const breadCrumbData = {
  '/': ['首页'],
  '/home': ['首页'],
  '/users': ['首页', '用户管理'],
  '/roles': ['首页', '角色管理'],
  '/products/categories': ['首页', '商品管理', '品种管理'],
  '/products/products-list': ['首页', '商品管理', '商品列表'],
  '/products/update/': ['首页', '商品管理', '修改商品'],
  '/products/add': ['首页', '商品管理', '添加商品'],
  '/finances/transaction': ['首页', '财务管理', '交易流水'],
  '/finances/sales-performance': ['首页', '财务管理', '销售业绩'],
};

class TheBreadCrumb extends Component {
  componentDidMount() {
    // console.log(this.props);
  }

  get breadCrumbItems() {
    let path = this.props.history.location.pathname;
    if (path) {
      if (path.includes('/products/update/')) {
        path = '/products/update/';
      } else if (path.includes('/products/add')) {
        path = '/products/add';
      }
      return breadCrumbData[path].map(item => (
        <Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>
      ));
    }
    return '';
  }

  render() {
    return (
      <Breadcrumb style={{ margin: '16px 0' }}>
        {this.breadCrumbItems}
      </Breadcrumb>
    );
  }
}
export default withRouter(TheBreadCrumb);
